<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>

<body>
    <div id="app">
        <child-component>
            <h1 slot="slot1">我是h1</h1>
            <h2 slot="slot2">我是h2</h2>
            <!-- 不指定插槽名称内容，会放到默认的无名插槽中 -->
            <h3>我是h3</h3> 
            <h4>我是h4</h4> 
            <!-- 通过template标签可以放置多个内容 -->
            <template slot="slot3">
                <div>content 11111</div>
                <div>content 22222</div>
            </template>
        </child-component>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        Vue.component('child-component', {
            template: `
            <div>
                <slot name="slot1"></slot>
                <div>子组件</div>
                <slot></slot>
                <div>子组件1</div>
                <slot name="slot2"></slot>
                <slot name="slot3"></slot>
            </div> `
        })
        var vm = new Vue({
            el: '#app',
            data: {}
        })
    </script>
</body>

</html>